<template>
	<view class="order">
		<view class="top">
			<view class="bagbox">
				<view class="box" @click="tj" v-if="isShow">
					+点击添加地址
				</view>
				<view class="box2" v-else>

					<text>{{arr[0].username}}</text><text class="t2">{{arr[0].userphone}}</text>

					<view class="v1">
						<text v-if="arr[0].status==1">默认</text>
						<text>{{arr[0].label}}</text>
						<text>{{arr[0].useraddress}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">

			<view class="left">
				<image src="../../static/image/小u自营.png" mode=""></image>
				<text>品牌精选</text>
			</view>
			<view class="right">
				<text>以免运费</text>
				<text>|</text>
				<text>领卷</text>
			</view>

		</view>
		<view class="li">
			<ul>
				<li v-for="item in list" :key="item.id">
					<view class="">
						<image :src="'http://localhost:3000'+item.img" mode=""></image>
					</view>
					<view class="right">
						<view class="xs">
							<text class="xs1">限时</text>
							<text>{{item.goodsname}}</text>
						</view>
						<view class="js">
							<text>xxxxxxxxxx</text>
						</view>
						<view class="jg">
							<text>￥{{item.price}}</text>
							<text>￥1099</text>
						</view>
						<view class="shu">
							<view class="th">
								<text>7天无理由退货</text>
								<text>特价</text>
							</view>
							<view class="l">
								x {{item.num}}
							</view>
						</view>
					</view>
				</li>
			</ul>

			<view class="bottom1">
				<view class="">
					<text>发票类型</text>
					<text>不开发票></text>
				</view>
				<view class="">
					<text>售后包邮</text>
					<text>部分商家赠送</text>
				</view>
				<view class="ly">
					<text>买家留言</text>
					<input type="text" placeholder="填写内容需要与商家协商并确认,45字以内">
				</view>
			</view>
			<view class="bottom1">
				<view class="">
					<text>商品金额</text>
					<text>￥1998</text>
				</view>
				<view class="">
					<text>优惠活动</text>
					<text class="hd">-￥200</text>
				</view>
				<view class="">
					<text>优惠卷</text>
					<text>暂无可用></text>
				</view>
			</view>
		</view>
		<view class="zhifu">
			<view class="">
				<view class="hj">
					<text>合计</text>
					<text>￥{{all.countmoney}}</text>
				</view>
				<view class="yf">
					<text>以免运费</text>
					<text>以优惠￥200元</text>
				</view>
			</view>
			<view class="">
				<button @click="zf">立即支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addreSslist
	} from '@/reuqust/api.js'
	export default {
		data() {
			return {
				list: [],
				all: '',
				arr: [],
				isShow: true
			}
		},
		onLoad(options) {
			console.log(options, '33333333');
			addreSslist({
				id: options.id,
				uid: uni.getStorageSync('userinfo').uid
			}).then(res => {
				console.log(res, 'qqqq');
				if (res.data.code == 200) {
					this.arr = res.data.list
				}
				console.log(this.arr, '33333');
				if (this.arr) {
					this.isShow = false
				}
			})
		},
		onShow() {
			this.list = uni.getStorageSync('arr') ? uni.getStorageSync('arr') : null
			console.log(this.list, '11111111');
			this.all = uni.getStorageSync('orderInfo') ? uni.getStorageSync('orderInfo') : null

		},
		methods: {
			tj() {
				uni.navigateTo({
					url: '../addAddress/addAddress'
				})
			},
			zf() {
				if (!this.arr) {
					uni.showToast({
						title: '请添加地址'
					})
					return
				}

				uni.navigateTo({
					url: '../payment/payment'
				})
			}
		},

	}
</script>

<style>
	.box2 .t2 {
		margin-left: 30rpx;
	}

	.box2 {
		padding: 30rpx;
	}

	.box2 .v1 {
		margin-top: 20rpx;
	}

	.box2 .v1 text:nth-child(1) {
		border: 1rpx solid red;
		background: papayawhip;
		border-radius: 50rpx;
		color: red;
		margin-right: 10rpx;
	}

	.box2 .v1 text:nth-child(2) {
		border: 1rpx solid blue;
		background: lightskyblue;
		border-radius: 50rpx;
		color: blue;
		margin-right: 10rpx;
	}

	.order {
		background-color: #ccc;

	}

	.top {
		height: 180rpx;
		background-color: #FF6600;
		position: relative;
	}

	.bagbox {
		width: 700rpx;
		height: 200rpx;
		background: white;
		top: 50rpx;
		left: 25rpx;
		position: absolute;
		border-radius: 30rpx;
	}

	.box {
		width: 300rpx;
		text-align: center;
		line-height: 80rpx;
		border: 1rpx solid orange;
		color: orange;
		background: papayawhip;
		margin: 50rpx auto;
	}

	.content .left image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;

	}

	.content {
		height: 80rpx;
		padding: 10rpx;
		margin-top: 100rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		line-height: 100rpx;

	}

	.content .left text {
		font-size: 40rpx;
	}

	.content .right text:nth-child(2) {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.content .right text:nth-child(3) {
		color: #FF6600;
	}

	li {
		display: flex;
		padding: 10rpx;
		background: white;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	li image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.li {
		padding: 20rpx;
	}

	li .right .xs .xs1 {
		background: #FF6600;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.li .right {
		margin-left: 30rpx;
	}

	.li .right .js {
		color: #ccc;
		margin-bottom: 20rpx;
	}

	.li .right .jg text:nth-child(1) {
		color: red;
		font-size: 40rpx;
	}

	.li .right .jg text:nth-child(2) {
		color: #ccc;
		font-size: 20rpx;
		text-decoration: line-through;
	}

	.li .right .th {
		margin-top: 20rpx;
	}

	.li .right .th text {
		background: red;
		color: white;
		border-radius: 10rpx;

	}

	.li .right .th text:nth-child(1) {
		margin-right: 20rpx;
	}

	.li .right .shu {
		width: 450rpx;

		display: flex;
		justify-content: space-between;

	}

	.li .right .shu .l {
		font-size: 30rpx;
	}

	.bottom1 {
		background: white;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx;
	}

	.bottom1 view {
		margin-bottom: 30rpx;
	}

	.bottom1 view text:nth-child(2) {
		float: right;
	}

	.bottom1 .ly {
		display: flex;
	}

	.bottom1 .ly input {
		margin-left: 50rpx;
	}

	.bottom1 .hd {
		color: red;
	}

	.zhifu {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		border-top: 1rpx solid black;
		height: 120rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.zhifu button {
		background: #FF6600;
		border-radius: 50rpx;
		color: white;
		margin-right: 40rpx;
	}

	.zhifu .hj text:nth-child(2) {
		margin-left: 20rpx;
		color: #FF6600;
	}

	.zhifu .yf {
		color: #ccc;
		margin-top: 20rpx;
	}

	.zhifu .yf text {
		margin-right: 20rpx;
	}
</style>
